<template>
  <div class="scanner-container" v-show="show">
    <div class="scanner-div">
      <div class="scanner-list" v-loading="loading"
           :element-loading-text="loadMsg"
           element-loading-spinner="el-icon-loading"
           element-loading-background="rgba(0, 0, 0, 0.4)">
        <div class="person-file">
          <person-file-form ref="personFileFormRef" @change="loadList"/>
          <el-row>
            <el-form :inline="true">
              <el-form-item label="档案类型:">
                {{ fileForm.fileType }}
              </el-form-item>
              <el-form-item label="所属人员:">
                {{ fileForm.personName }}
              </el-form-item>
              <el-form-item v-if="isFile" label="档案名称:">
                {{ fileForm.fileName }}
              </el-form-item>
              <el-form-item v-if="isFile" style="float: right">
                <el-button type="primary" size="mini" icon="el-icon-d-arrow-left" @click="fileBack"/>
              </el-form-item>
              <el-form-item v-if="!isFile && !isView" style="float: right">
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd">新增</el-button>
              </el-form-item>
            </el-form>
            <div class="file-head">
            </div>
          </el-row>
          <el-row class="file_list" v-if="isFile">
            <el-empty style="width: 100%;height: 100%" v-if="imgList.length===0" :description="'暂无文件'"/>
            <div class="scanner-img" v-for="(file,index) in imgList" :key="file.id">
              <image-preview :oss-ids="file.archivalId" :width="100" :height="100"/>
              <span class="file-name">{{ file.name }}</span>
              <div class="file-option" v-if="!isView">
                <el-button type="danger" size="small" icon="el-icon-delete" alt="删除" circle
                           @click="handleDelete(file)"/>
              </div>
            </div>
          </el-row>
          <el-row class="file_list" v-else>
            <el-empty style="width: 100%;height: 100%" v-if="fileList.length===0" :description="'暂无档案'"/>
            <div class="scanner-img" v-for="(file,index) in fileList" :key="file.id" @click="openScanner(file)">
              <image-preview v-if="!!file.coverImage" :oss-ids="file.coverImage" :width="100" :height="100"/>
              <img v-else class="file-img" fit="cover" src="@/assets/images/person_file.png" alt="">
              <span class="file-name">{{ file.name }}</span>
              <span class="file-type">{{ file.fileFromTime.substr(0, 10) }}</span>
              <div class="file-option" v-if="!isView">
                <el-row>
                  <el-button type="success" size="small" icon="el-icon-camera" alt="扫档" circle
                             @click.stop="openScanner(file)"></el-button>
                  <el-button type="primary" size="small" icon="el-icon-edit" alt="编辑" circle
                             @click.stop="handleEdit(file)"/>
                </el-row>
                <el-row>
                  <el-button type="danger" size="small" icon="el-icon-delete" alt="删除" circle
                             @click.stop="handleDelete(file)"/>
                </el-row>
              </div>
            </div>
          </el-row>
        </div>
      </div>
      <div class="scanner">
        <doc-camara v-if="show && isFile && !isView" auto-upload @upload="uploadSuccess">
          <template v-slot:topTool>
          </template>
        </doc-camara>
      </div>
      <div class="scanner_close" @click="close">
        <i class=" close_icon el-icon-close"/>
      </div>
    </div>
  </div>
</template>

<script>
import {delPersonFile, listPersonFile} from "@/api/business/personFile";
import PersonFileForm from "@/views/business/person/personFileForm.vue";
import PersonSelect from "@/components/PersonSelect/index.vue";
import DocCamara from "@/components/DocumentCamera/idnex.vue";
import {addFileAttachment, delFileAttachment, listFileAttachment} from "@/api/business/fileAttachment";

export default {
  name: "FileScanner",
  components: {DocCamara, PersonSelect, PersonFileForm},
  props: ['value'],
  emits: ["input"],
  data() {
    return {
      show: false,
      isView: false,
      fileList: [],
      imgList: [],
      personFileId: '',
      isFile: false,
      loading: false,
      loadMsg: '数据加载中...',
      // 表单参数
      fileForm: {
        personName: '',
        fileType: '',
        fileName: ''
      },
      queryForm: {
        personId: null,
        fileType: null,
        topFileType: null
      },
    }
  },

  methods: {

    loadList() {
      this.loading = true;
      if (this.isFile) {
        listFileAttachment({personFileId: this.personFileId}).then(res => {
          this.imgList = res.rows;
        }).finally(() => {
          this.loading = false;
        })
      } else {
        listPersonFile(this.queryForm).then(res => {
          this.fileList = res.rows
        }).finally(() => {
          this.loading = false;
        })
      }
    },
    uploadSuccess(oss) {
      this.loading = true
      addFileAttachment({
        name: oss.fileName,
        personFileId: this.personFileId,
        archivalImagery: oss.url,
        archivalId: oss.ossId,
        orderNum: this.imgList.length + 1,
        status: 1,
      }).then(res => {
        this.loadList();
      })
    },
    handleDelete(data) {
      this.$modal.confirm(this.isFile ? '确定删除该页数据吗？' : '确认删除《' + data.name + '》吗?').then(() => {
            this.loading = true;
            return this.isFile ? delFileAttachment(data.id) : delPersonFile(data.id);
          }
      ).then(() => {
        this.loading = false;
        this.loadList();
        this.$modal.msgSuccess("删除成功");
      })
    },
    openScanner(data) {
      this.isFile = true;
      this.fileForm.fileName = data.name;
      this.personFileId = data.id
      this.loadList()
    },
    fileBack() {
      this.isFile = false;
      this.imgList = []
    }
    ,
    handleEdit(row) {
      this.$refs.personFileFormRef.open(row)
    }
    ,
    handleAdd() {
      this.$refs.personFileFormRef.open(this.queryForm)
    }
    ,
    close() {
      this.show = false;
      this.isFile = false;
      this.fileList = [];
      this.imgList = [];
    },
    open(data, ex) {
      this.queryForm = data;
      this.isView = ex.isView;
      Object.assign(this.fileForm, ex)
      this.loadList();
      this.show = true;
    },
  }
}
</script>

<style lang="scss" scoped>
.scanner-container {
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9989;
  background: white;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;

  .person-file {
    width: 100%;

    .file_list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;


      .file-name {
        margin-top: 5px;
        text-align: center;
        font-weight: bold;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        white-space: nowrap;
        width: 110px;
      }

      .file-type {
        text-align: center;
        width: 100px;

      }


    }

    .file-head {
      float: right;
    }

    .el-row {

    }
  }

  .footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
  }
}

.scanner-form {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  margin: 10px 0;
  border-radius: 10px;
  border: #00afff 1px solid;
  padding-top: 5px;
}

.scanner-div {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  margin: 10px;

  .scanner-list {
    border: #00afff 1px solid;
    border-radius: 10px;
    width: calc(100% - 550px);
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 15px;

    .scanner-img {
      width: 140px;
      height: 180px;
      display: flex;
      gap: 5px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 10px;
      position: relative;
      padding: 5px;
      box-shadow: 0 0 20px 1px gainsboro inset;
      border-radius: 5px;

      &:hover {
        box-shadow: 0 0 20px 1px #00afff inset, 8px 8px 2px 1px rgba(0, 0, 255, .2);
        top: -4px;
        left: -4px;
      }

      &:hover .file-option {
        display: flex;
      }

      .file-img {
        width: 100px;
        height: 120px;
        box-shadow: grey 0 0 10px 0;
        user-select: none;

      }

      .file-option {
        display: none;
        position: absolute;
        width: 100px;
        height: 100px;
        margin: 20px auto 0 auto;
        left: 0;
        right: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
      }

      .file-title {
        padding: 5px;
        white-space: nowrap;
        width: 100%;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        user-select: none;
      }
    ;
    }
  }

  .scanner {
    height: 90%;
    margin: 0 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
  }

  .scanner_close {
    width: 0;
    height: 0;
    border: 35px solid;
    border-color: red red transparent transparent;
    position: absolute;
    top: 0;
    right: 0;

    .close_icon {
      color: white;
      font-size: 25px;
      position: relative;
      bottom: 25px;
    }
  }
}


</style>
